經過前幾天的基礎介紹,今天可以開始寫遊戲啦,第一個遊戲呢,我想來寫一個經典遊戲:Brick Breaker,為什麼挑選這遊戲呢??
是這樣的,這遊戲只需要簡單的幾個元件,透過元件間的互動,就能夠組合成趣味性高的經典,蠻適合當作起始點的.
好啦,廢話不多說!!我們開始吧!
首先,我們先建好800*630的canvas,並且畫個黑色背景.
<!DOCTYPE html>
<html lang="en">
<head>
<title>First Game</title>
<meta name="description" content="第一個遊戲">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<body>
<canvas id="playground" width="800" height="630"></canvas>
<script>
var canvas, canvasContext;
window.onload = () => {
canvas = document.getElementById('playground');
canvasContext = canvas.getContext('2d');
// background
canvasContext.fillStyle = 'black';
canvasContext.fillRect(0, 0, canvas.width, canvas.height);
}
</script>
</body>
</html>
之後我就不放整段程式碼啦,就只放<script>
之間的部分了.
畫好背景之後,我們先把遊戲中會出現的元件畫好,其實也就球跟磚兩種而已.
那就先把畫出來吧,在座標(300,300)的位置先把球畫出來
canvasContext.fillStyle = 'white';
canvasContext.beginPath();
canvasContext.arc(300, 300, 10, 0, Math.PI * 2);
canvasContext.fill();
現在畫面應該是有一個孤獨的小白球
畫個磚塊陪他吧!我們就畫個80*30的紅磚在座標(0,0)的位置.
canvasContext.fillStyle = 'red';
canvasContext.fillRect(0, 0, 80, 30);
這時候畫面上就多了小紅磚來陪伴小白球啦.
以上的部分其實都還在前幾天內容的範圍,今天我們的目標設定在讓球動起來.
先來說說如何讓畫面看起來有在動,其實就是清除舊的畫面,然後畫新的,所以整個流程就會是:
呈現畫面 -> 更新元件狀態 -> 清除畫面 -> 呈現畫面 -> 更新元件狀態 -> 清除畫面
這樣不斷的循環.
好的要完成這流程,我們首先先把球的座標變成可以變動的參數.
<script>
var canvas, canvasContext;
//球的參數
var ball_x = 300;
var ball_y = 300;
window.onload = () => {
canvas = document.getElementById('playground');
canvasContext = canvas.getContext('2d');
// background
canvasContext.fillStyle = 'black';
canvasContext.fillRect(0, 0, canvas.width, canvas.height);
canvasContext.fillStyle = 'white';
canvasContext.beginPath();
canvasContext.arc(ball_x, ball_y, 10, 0, Math.PI * 2);
canvasContext.fill();
canvasContext.fillStyle = 'red';
canvasContext.fillRect(0, 0, 80, 30);
}
</script>
接下來要處理的就是重複畫圖、更新、清除的流程了.那就先把畫圖寫成一個function,後面只需要重複執行function就行了.
drawAll = () => {
// background
canvasContext.fillStyle = 'black';
canvasContext.fillRect(0, 0, canvas.width, canvas.height);
canvasContext.fillStyle = 'white';
canvasContext.beginPath();
canvasContext.arc(ball_x, ball_y, 10, 0, Math.PI * 2);
canvasContext.fill();
canvasContext.fillStyle = 'red';
canvasContext.fillRect(0, 0, 80, 30);
}
接下來就要來設定執行drawAll
的時間啦,因為要反覆的執行,所以我們選用setInterval()
,這邊設定時間是以ms來計算的,那為了畫面看起來不要有頓感,我們設定1秒更新30次畫面.
<script>
var canvas, canvasContext;
//球的參數
var ball_x = 300;
var ball_y = 300;
window.onload = () => {
canvas = document.getElementById('playground');
canvasContext = canvas.getContext('2d');
//一秒更新幾次畫面
var timesPerSec = 30;
setInterval(drawAll, 1000/timesPerSec);
}
drawAll = () => {
// background
canvasContext.fillStyle = 'black';
canvasContext.fillRect(0, 0, canvas.width, canvas.height);
canvasContext.fillStyle = 'white';
canvasContext.beginPath();
canvasContext.arc(ball_x, ball_y, 10, 0, Math.PI * 2);
canvasContext.fill();
canvasContext.fillStyle = 'red';
canvasContext.fillRect(0, 0, 80, 30);
}
</script>
執行後會發現球沒動啊!!!原來是我們還沒設計移動方式啊.
在drawAll
中加入移動的程式看看.
ball_x += 5;
ball_y += 5;
我們會看到,小白球默默的從畫面中往右下角移動.
小白球離場了,那我們今天也就停在這吧!明天我們再繼續~